<template>
  <div class="staff">
    <table-title
        title="工作人员管理管理"
        button-text="添加用户"
        @click="addDetail">
    </table-title>

    <table-search :form="formList"></table-search>

    <el-table
        border
        stripe
        :data="tableData"
        v-loading="loading">
      <el-table-column align="center" type="index" label="序号" width="64"></el-table-column>
      <el-table-column align="center" prop="userName" label="昵称"></el-table-column>
      <el-table-column align="center" prop="tuserName" label="姓名"></el-table-column>
      <el-table-column align="center" prop="phone" label="电话"></el-table-column>
      <el-table-column align="center" label="角色">
        <template slot-scope="scope">
          <span v-if="scope.row.role == '1'">工作人员</span>
          <span v-if="scope.row.role == '2'">管理员</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="info" label="身份证号"></el-table-column>
      <el-table-column align="center" prop="birthday" label="生日"></el-table-column>
      <el-table-column align="center" prop="address" label="住址"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
              type="primary"
              slot="reference"
              icon="el-icon-edit"
              size="mini"
              @click="editDetail(scope.row.userId)">
          </el-button>

          <el-button
              type="danger"
              slot="reference"
              icon="el-icon-delete"
              size="mini"
              @click="deleteDetail(scope.row.userId)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--<el-pagination
        background
        layout="prev, pager, next"
        :page-count="totalCount"
        :current-page="currentPage"
        @current-change="changePage"
        :hide-on-single-page="true"
        class="page">
    </el-pagination>-->
  </div>
</template>
<script>
import TableTitle from "../../../components/TableTitle";
import TableSearch from "../../../components/TableSearch";
import modelUser from "../../../models/user";

export default {
  components: {TableSearch, TableTitle},
  data() {
    return {
      // 搜索表单
      formList: [
        {
          type: 'input',
          name: 'name',
          label: '姓名',
          placeholder: '请输入关键字'
        },
        {
          type: 'input',
          name: 'phone',
          label: '手机号',
          placeholder: '请输入关键字'
        },
        {
          type: 'input',
          name: 'id_card',
          label: '身份证',
          placeholder: '请输入关键字'
        },
        {
          type: 'button',
          name: 'button1',
          isSearch: true,
          click: this.search
        }
      ],

      // 数据
      tableData: [
        /*{
          "address": "string",
          "birthday": "string",
          "img": "string",
          "info": "string",
          "password": "string",
          "phone": "string",
          "role": "string",
          "tuserName": "string",
          "userId": 0,
          "userName": "string",
          "workPlace": "string"
        }*/
      ],

      // 页码
      loading: true,
      /*currentPage: 1,
      totalCount: 1*/
    };
  },
  methods: {
    /**
     * 发布
     */
    addDetail() {
      this.$router.push("/admin/user-editor/staff");
    },

    /**
     * 编辑
     */
    editDetail(id) {
      this.$router.push("/admin/user-editor/staff/" + id);
    },

    /**
     * 删除
     */
    deleteDetail(id) {
      this.$confirm("将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.axios.delete(this.$store.state.api + '/user/del?ids=' + id)
            .then((response) => {
              if (response.data.code == 200) {
                this.$message({
                  type: response.data.data ? 'success' : 'error',
                  message: response.data.data ? '删除成功！' : '删除失败！'
                });
              }
              // 获取数据
              this.changePage(1);
            })
            .catch((error) => {
              console.log(error);
            });
      });
    },

    /**
     * 搜索
     */
    search(value) {
      if (value.name || value.phone || value.id_card) {
        // 搜索数据
        let searchValue = {};
        value.name && (searchValue.tuserName = value.name);
        value.phone && (searchValue.phone = value.phone);
        value.id_card && (searchValue.info = value.id_card);

        modelUser.getUserDataByRole(["1", "2"], searchValue)
            .then((data) => {
              this.tableData = data;
              /*this.totalCount = response.data.data.pages;*/
              this.loading = false;
            });
      }
      // 全部为空，重新加载
      else this.changePage(1);
    },

    /**
     * 获取数据
     *
     * @param val
     */
    changePage(val) {
      this.currentPage = val;

      modelUser.getUserDataByRole(["1", "2"])
          .then((data) => {
            if (data.length) {
              this.tableData = data;
              /*this.totalCount = response.data.data.pages;*/
              this.loading = false;
            }
          });
    }
  },
  created() {
    /**
     * 获取数据
     */
    this.changePage(this.currentPage);
  }
};
</script>

<style lang="less" scoped>
@import "../../../assets/less/base.less";

.staff {
  color: @fontColor;
  min-height: 100%;
  background: white;
}
</style>
